<template>
  <div class="border-line card">
    <header-title
      title="人才保租房出租情况（总体出租率79.03%）"
      :style="{ 'font-size': fontSize + 'px' }"
      @fullScreen="handleFullScreen"
    ></header-title>
    <div @mouseenter="clearAutoPlay" @mouseleave="setAutoPlay">
      <echarts-view ref="echarts" class="card-content" :options="option" height="300px"></echarts-view>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import * as echarts from 'echarts'
import { getHire } from '@/api/analysis'
import { setFontSize } from '@/utils/util'
export default {
  props: {
    areaID: {
      type: Number,
      default: 0,
    },
    isFullscren: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    headerTitle,
    echartsView,
  },
  data() {
    return {
      autoPlayer: null,
      option: {},
      fontSize: 16,
    }
  },
  mounted() {
    this.fetchData()
    window.addEventListener('resize', this.screenAdatper)
  },
  watch: {
    areaID: function (newVal, oldVal) {
      this.fetchData()
    },
  },
  methods: {
    fetchData() {
      getHire({ RegionNo: this.areaID }).then((res) => {
        const xAxisData = []
        const yysData = []
        const czsData = []
        const czlData = []
        res.forEach((e) => {
          const { YYS, CZS, QJ, CZL } = e
          xAxisData.push(QJ)
          yysData.push(YYS)
          czsData.push(CZS)
          czlData.push(CZL)
        })
        // 绘制左侧面
        const CubeLeft = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint
            const c0 = [shape.x, shape.y]
            const c1 = [shape.x - 18, shape.y - 10]
            const c2 = [xAxisPoint[0] - 18, xAxisPoint[1] - 9]
            const c3 = [xAxisPoint[0], xAxisPoint[1]]
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
          },
        })
        // 绘制右侧面
        const CubeRight = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint
            const c1 = [shape.x, shape.y]
            const c2 = [xAxisPoint[0], xAxisPoint[1]]
            const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
            const c4 = [shape.x + 18, shape.y - 9]
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
          },
        })
        // 绘制顶面
        const CubeTop = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y]
            const c2 = [shape.x + 18, shape.y - 9]
            const c3 = [shape.x, shape.y - 18]
            const c4 = [shape.x - 18, shape.y - 10]
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
          },
        })
        // 注册三个面图形
        echarts.graphic.registerShape('CubeLeft', CubeLeft)
        echarts.graphic.registerShape('CubeRight', CubeRight)
        echarts.graphic.registerShape('CubeTop', CubeTop)

        // 绘制左侧面
        const CubeLeft1 = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint
            const c0 = [shape.x, shape.y]
            const c1 = [shape.x + 30, shape.y - 10]
            const c2 = [xAxisPoint[0] + 30, xAxisPoint[1] - 9]
            const c3 = [xAxisPoint[0], xAxisPoint[1]]
            ctx
              .moveTo(c0[0] + 48, c0[1])
              .lineTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0] + 48, c3[1])
              .closePath()
          },
        })
        // 绘制右侧面
        const CubeRight1 = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint
            const c1 = [shape.x, shape.y]
            const c2 = [xAxisPoint[0], xAxisPoint[1]]
            const c3 = [xAxisPoint[0] + 66, xAxisPoint[1] - 9]
            const c4 = [shape.x + 66, shape.y - 9]
            ctx
              .moveTo(c1[0] + 48, c1[1])
              .lineTo(c2[0] + 48, c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath()
          },
        })
        // 绘制顶面
        const CubeTop1 = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            const c1 = [shape.x + 48, shape.y]
            const c2 = [shape.x + 66, shape.y - 9]
            const c3 = [shape.x + 48, shape.y - 18]
            const c4 = [shape.x + 30, shape.y - 10]
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
          },
        })
        // 注册三个面图形
        echarts.graphic.registerShape('CubeLeft1', CubeLeft1)
        echarts.graphic.registerShape('CubeRight1', CubeRight1)
        echarts.graphic.registerShape('CubeTop1', CubeTop1)

        const options = {
          // color: [
          //   {
          //     type: 'linear',
          //     x: 0,
          //     y: 0,
          //     x2: 0,
          //     y2: 1,
          //     colorStops: [
          //       { offset: 0, color: 'rgba(44, 222, 221, 1)' }, // 设置颜色渐变
          //       { offset: 1, color: 'rgba(8, 149, 224, 1)' }
          //     ]
          //   },
          //   {
          //     type: 'linear',
          //     x: 0,
          //     y: 0,
          //     x2: 0,
          //     y2: 1,
          //     colorStops: [
          //       { offset: 0, color: 'rgba(200, 53, 38, 1)' },
          //       { offset: 1, color: 'rgba(242, 88, 73, 1)' }
          //     ]
          //   },
          //   'rgba(255, 238, 10, 1)'
          // ],
          // tooltip: {
          //   trigger: 'axis',
          //   axisPointer: {
          //     type: 'cross',
          //     label: {
          //       backgroundColor: 'rgb(22, 245, 255,.8)'
          //     }
          //   }
          // },
          // legend: {
          //   top: 0,
          //   left: 0,
          //   bottom: 10,
          //   textStyle: {
          //     color: '#fff'
          //   }
          // },
          // grid: {
          //   left: 0,
          //   right: 0,
          //   top: 40,
          //   bottom: '3%',
          //   containLabel: true
          // },
          // yAxis: [
          //   {
          //     type: 'value',
          //     splitNumber: 4,
          //     axisTick: {
          //       // 刻度线
          //       show: false
          //     },
          //     axisLine: {
          //       show: false
          //     },
          //     splitLine: {
          //       // 网格线
          //       show: false,
          //       lineStyle: {
          //         type: 'dashed',
          //         color: 'rgba(127, 214, 255, 1)'
          //       }
          //     }
          //   },
          //   {
          //     type: 'value',
          //     axisTick: {
          //       // 刻度线
          //       show: false
          //     },
          //     axisLine: {
          //       show: false
          //     },
          //     splitLine: {
          //       // 网格线
          //       show: false
          //     }
          //   }
          // ],
          // xAxis: [
          //   {
          //     type: 'category',
          //     data: xAxisData,
          //     axisTick: {
          //       // 刻度线
          //       show: false
          //     },
          //     axisLine: {
          //       // 坐标轴
          //       show: false
          //     },
          //     splitLine: {
          //       // 网格线
          //       show: false
          //     }
          //   }
          // ],
          // series: [
          //   {
          //     name: '运营数',
          //     type: 'bar',
          //     data: yysData,
          //     itemStyle: {
          //       color: '#3fb1e3',
          //       barBorderRadius: [30, 30, 0, 0],
          //       shadowColor: 'rgba(0,255,225,1)'
          //     },
          //     tooltip: {
          //       valueFormatter: function (value) {
          //         return value + '套'
          //       }
          //     }
          //   },
          //   {
          //     name: '出租数',
          //     type: 'bar',
          //     data: czsData,
          //     itemStyle: {
          //       color: '#6be6c1',
          //       barBorderRadius: [30, 30, 0, 0],
          //       shadowColor: 'rgba(0,255,225,1)'
          //     },
          //     tooltip: {
          //       valueFormatter: function (value) {
          //         return value + '套'
          //       }
          //     }
          //   },
          //   {
          //     name: '出租率',
          //     type: 'line',
          //     data: czlData,
          //     yAxisIndex: 1,
          //     itemStyle: {
          //       color: '#f36c6c',
          //       barBorderRadius: [30, 30, 0, 0],
          //       shadowColor: 'rgba(0,255,225,1)'
          //     },
          //     tooltip: {
          //       valueFormatter: function (value) {
          //         return value + '%'
          //       }
          //     }
          //   }
          // ],
          // dataZoom: [
          //   {
          //     xAxisIndex: 0, // 这里是从X轴的0刻度开始
          //     show: false, // 是否显示滑动条，不影响使用
          //     type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
          //     startValue: 0, // 从头开始。
          //     endValue: 4 // 一次性展示多少个。
          //   }
          //
          // backgroundColor: '#012366',
          // color: ['#02E4FF','#F6AE31'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: 'rgb(22, 245, 255,.8)',
              },
            },
          },
          grid: {
            left: 0,
            right: 0,
            bottom: '3%',
            top: 40,
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: xAxisData,
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255,1)',
                shadowColor: 'rgba(255,255,255,1)',
                shadowOffsetX: '20',
              },
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 25],
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: 30,
              fontSize: 20,
            },
          },
          yAxis: [
            {
              type: 'value',
              axisLine: {
                show: false,
                lineStyle: {
                  color: 'white',
                },
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                fontSize: 20,
              },
              boundaryGap: ['0', '20%'],
            },
            {
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'white',
                },
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
                fontSize: 20,
              },
              boundaryGap: ['20%', '20%'],
            },
          ],
          series: [
            {
              name: '运营数',
              type: 'custom',
              renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)])
                return {
                  type: 'group',
                  children: [
                    {
                      type: 'CubeLeft',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#00F6FF',
                            // color: 'transparent',
                          },
                          {
                            offset: 0.5,
                            color: 'rgba(7, 185, 244, 0.46)',
                            // color: 'transparent',
                          },
                          {
                            offset: 1,
                            // color: '#49BEE5',
                            // color: 'transparent',
                            color: 'rgba(48, 91, 251, 0.01)',
                          },
                        ]),
                      },
                    },
                    {
                      type: 'CubeRight',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#00F6FF',
                          },
                          {
                            offset: 1,
                            color: 'rgba(48, 91, 251, 0.01)',
                          },
                        ]),
                      },
                    },
                    {
                      type: 'CubeTop',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#2F80ED',
                          },
                          {
                            offset: 1,
                            color: '#56CCF2',
                          },
                        ]),
                      },
                    },
                  ],
                }
              },
              data: yysData,
              tooltip: {
                valueFormatter: function (value) {
                  return value + '套'
                },
              },
            },
            {
              name: '出租数',
              type: 'custom',
              renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)])
                return {
                  type: 'group',
                  children: [
                    {
                      type: 'CubeLeft1',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#CF9E38',
                          },
                          {
                            offset: 1,
                            color: '#D5AC52',
                          },
                        ]),
                      },
                    },
                    {
                      type: 'CubeRight1',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#CF9E38',
                          },
                          {
                            offset: 1,
                            color: '#D5AC52',
                          },
                        ]),
                      },
                    },
                    {
                      type: 'CubeTop1',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#CF9E38',
                          },
                          {
                            offset: 1,
                            color: '#D5AC52',
                          },
                        ]),
                      },
                    },
                  ],
                }
              },
              data: czsData,
              tooltip: {
                valueFormatter: function (value) {
                  return value + '套'
                },
              },
            },
            {
              name: '出租率',
              type: 'line',
              smooth: true, // 是否平滑
              showAllSymbol: true,
              symbol: 'circle',
              yAxisIndex: 1,
              symbolSize: 16,
              lineStyle: {
                normal: {
                  color: '#F6AE31',
                  width: 5,
                },
              },
              zlevel: 1,
              label: {
                show: false,
                position: 'top',
                textStyle: {
                  color: '#6c50f3',
                },
              },
              itemStyle: {
                // color: '#fff',
                // borderColor: '#F6AE31',
                color: '#F6AE31',
                borderColor: '#fff',
                borderWidth: 3,
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(251,176,48,0.8)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(239, 170, 52, 0.02)',
                      },
                    ],
                    false
                  ),
                  shadowColor: 'rgba(0, 96, 255, 0.9)',
                  shadowBlur: 10,
                },
              },
              data: czlData,
              tooltip: {
                valueFormatter: function (value) {
                  return value + '%'
                },
              },
            },
          ],
          dataZoom: [
            {
              xAxisIndex: 0, // 这里是从X轴的0刻度开始
              show: false, // 是否显示滑动条，不影响使用
              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 8, // 一次性展示多少个。
            },
          ],
        }
        this.option = options
        this.$nextTick(() => {
          this.setAutoPlay()
        })
      })
    },
    setAutoPlay() {
      this.clearAutoPlay('setAutoPlay')
      this.autoPlayer = setInterval(() => {
        if (this.option.dataZoom[0].endValue === this.option.series[0].data.length) {
          this.option.dataZoom[0].endValue = 8
          this.option.dataZoom[0].startValue = 0
        } else {
          this.option.dataZoom[0].endValue = this.option.dataZoom[0].endValue + 1
          this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1
        }
      }, 3000)
    },
    clearAutoPlay() {
      if (!this.$isEmpty(this.autoPlayer)) {
        clearInterval(this.autoPlayer)
      }
    },
    screenAdatper() {
      this.$refs.echarts && this.$refs.echarts.chart.resize()
      this.option.fontSize = setFontSize(30)
      this.$refs.echarts.setOptions(this.option)
      this.fontSize = setFontSize(30)
    },
    beforeDestoryed() {
      window.removeEventListener('resize')
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 400px;
  &-content {
    margin-top: 10px;
  }
}
</style>
